<template>
	<view class="content">
		<!-- 送车 -->
		<view v-if="this.is_status == 5">
			<view class="idCrd">
				<text style="margin-bottom: 20rpx;">照片</text>
				<view class="ddd">
					<view
						v-for="(item, index) in tempFilePaths"
						:key="index"
						v-if="tempFilePaths"
					>
						<view class="image"  @click="changeImg(index)">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</view>
					<view
						class="image"
						@click="shanchuan"
						style="color: #FFFFFF"
					>
						<u-icon name="plus" color="#ccc" size="50"></u-icon>
					</view>
				</view>
			</view>

			<view class="bottom" @click="sub(1)">确认收款并提交</view>
		</view>

		<!-- 还车 -->
		<view v-else>
			<view class="idCrd">
				<text style="margin-bottom: 20rpx;">照片</text>
				<view class="ddd">
					<view
						v-for="(item, index) in tempFilePaths"
						:key="index"
						v-if="tempFilePaths"
					>
						<view class="image" @click="changeImg(index)">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</view>
					<view
						class="image"
						@click="shanchuan"
						style="color: #FFFFFF"
					>
						<u-icon name="plus" color="#ccc" size="50"></u-icon>
					</view>
				</view>
			</view>

			<view class="bottom" @click="sub(0)">确认收款并提交</view>
		</view>
	</view>
</template>
<script>
import uploadImage from '../../common/ossutil/uploadFile.js';
export default {
	data() {
		return {
			oid: '',
			is_status: '',
			tempFilePaths: []
		};
	},
	// sndCarPhoto
	methods: {
		async sub(e) {
			if (!e) {
				//送
				if (!this.oid) return;
				if (!this.tempFilePaths) return uni.$showMsg('不能为空');

				const res = await this.$u.post('api/user/user_picture', {
					oid: this.oid,
					picture: this.tempFilePaths
				});
				uni.navigateBack({
					delta: 1
				});
				uni.$showMsg(res.msg);
				//console.log('res >>  ', res);
			} else {
				// 还
				if (!this.oid) return;
				if (!this.tempFilePaths) return uni.$showMsg('不能为空');

				const res = await this.$u.post('api/user/user_car_picture', {
					oid: this.oid,
					picture: this.tempFilePaths
				});
				uni.navigateBack({
					delta: 1
				});
				uni.$showMsg(res.msg);
				//console.log('res >>  ', res);
			}
		},
		shanchuan() {
			uni.chooseImage({
				count: 1,
				sourceType: ['album'],
				success: res => {
					uni.showLoading({
						mask: true
					});

					uploadImage(res.tempFilePaths[0], 'car/', result => {
						this.tempFilePaths.push(result);
						uni.hideLoading();
					});
				}
			});
		},
		changeImg(i) {
			uni.chooseImage({
			    count: 1, 
			    sourceType: ['album'], 
			    success: res=> {
			        uni.showLoading({
			              mask: true
			            })
						
			            uploadImage(res.tempFilePaths[0], 'car/',
			                result => {
							
							this.tempFilePaths[i] = result
							let  tempFilePaths= this.tempFilePaths
							this.tempFilePaths = []
							this.tempFilePaths = tempFilePaths
							console.log('this.tempFilePaths :>> ', this.tempFilePaths);
							uni.hideLoading();
			            }
			        )
			        
			    }
			})
		},
	},
	onLoad(oid) {
		var oid = JSON.parse(oid.oid);

		this.oid = oid.oid;
		this.is_status = oid.is_status;
		console.log('this.is_status :>> ', this.is_status);
	}
};
</script>

<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	padding: 30rpx;
}
.bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 106rpx;
	background: #880000;
	border-radius: 10rpx;
	margin-top: 20rpx;

	font-size: 36rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #ffffff;
}
.idCrd {
	width: 690rpx;
	//height: 300rpx;
	background: #2a2929;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.ddd {
		display: flex;
		//justify-content: flex-start;
		flex-wrap: wrap;
		//padding: 0  30rpx;
		image {
			width: 100%;
			height: 100%;
		}
		.image {
			width: 250rpx;
			height: 180rpx;
			border: 1rpx dashed #606266;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 40rpx;
			margin-bottom: 20rpx;
		}
	}

	text {
		height: 34rpx;
		line-height: 34rpx;
		font-size: 36rpx;
		font-family: 'Microsoft YaHei', PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}

	text:before {
		content: '*';
		color: #ff0000;
	}
	/deep/ .u-list-item {
		background: none !important;
		border: 1rpx dashed #606266;
		margin-right: 30rpx !important;
	}
	/deep/ .u-upload {
		// display: flex !important;
		// justify-content: space-between !important;
	}
}
.box {
	display: flex;
	overflow: scroll;
}
.scan-img {
	opacity: 0.4;
	width: 100%;
	height: 500upx;
}
.scan-text {
	font-size: 20px;
	text-align: center;
	line-height: 60upx;
}
</style>
